<template>
  <div class="add">
 <van-nav-bar
  title="登录"  
  left-arrow
/>
   <van-image  width="100%" height="auto"
   :src="require('../assets/iconfont/login3.png')" />
   <van-form @submit="onSubmit">
  <van-field
    v-model="username"
    name="用户名"
    label="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="password"
    type="password"
    name="密码"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">提交</van-button>
    
  <van-checkbox v-model="check" @click="checked">登录即代表你同意《隐私政策》</van-checkbox>
    
  </div>
</van-form>
<van-divider>其他方式登录</van-divider>
<van-grid>
  <van-grid-item url="https://im.qq.com/">
    <img src="../assets/img/qq.png" alt="">
  </van-grid-item>
<van-grid-item url="https://weixin.qq.com/">
    <img src="../assets/img/vx.png" alt="">
  </van-grid-item>
 <van-grid-item url="https://weibo.com/">
    <img src="../assets/img/wb.png" alt="">
  </van-grid-item>
</van-grid>
  </div>
</template>

<script>
import { Toast } from 'vant';
import axios from 'axios';
export default {
 data() {
    return {
      username: '',
      password: '',
      check:false,
      checkeds:0
    };
  },
  methods: {
    checked(){
      this.checkeds=1
    },
     onSubmit() {
       if(this.checkeds==0){

         Toast.success('请勾选《隐私政策》')
       }else{
        // console.log('submit', values);
       axios.get('http://localhost:3000/login',{
        params:{
          username:this.username,
          password:this.password
        } 
      }).then(res => {
        // console.log(res);
          if(res.data.code ==200){
              Toast.success('登录成功')             
              // //跳转页面，编程式导航
              // console.log(res.data.data);
              localStorage.setItem('user_id', res.data.data.result[0].id);
              localStorage.setItem('token', res.data.data.token);
              this.$router.push('./my')
          }else{
              Toast.success('用户不存在')
          }
      })
       }
    },
  },
};
</script>

<style scoped>
.van-nav-bar{
    background: lightblue;
}
.add p{
 text-align: center;
 font-size: 15px;
}
.van-checkbox__label{
  color: lightgray;
}
.van-checkbox{
 justify-content: center;
 margin-top: 10px;
}
.van-grid{
  justify-content: center;
}
.van-grid-item__content--clickable{
  width: 30px;
  
}
.van-grid img{
  width: 30px;
  height: 30px;
  padding: 10px;
}
.van-grid-item__content::after {
    z-index: 1;
    border-width: 0 0px 0px 0;
}
.van-hairline--top{
    position: initial;
}
</style>
